var stats = new Stats(),
    sds = stats.domElement.style;
sds.position = 'absolute';
sds.top = '0px';
sds.right = '0px';
document.body.appendChild(stats.domElement);

var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    pathPointsFrom, pathPointsTo, pathPointsNow, tween,
    pathCount = 0,
    offset = 0,
    steps = 200,
    colors = ["#EDEEC0", "#ED7B84", "#7397C3", "#7EB77F"],
    interpolationPoint = {percentage: 0};
ctx.lineWidth = 4;
ctx.lineCap = 'round';

//获取svg图形数据
function getPathPoints(selecter) {
    var path = document.getElementById(selecter);
    var length = path.getTotalLength();
    var points = [];
    for(var i = 0; i < steps; i += 1) {
        points.push(path.getPointAtLength(length * i / steps));
    }
    return points;
}
var paths = [getPathPoints('circle-path'), getPathPoints('rect-path'), getPathPoints('triangle-path')];

//返回当前路径点
function interpolationPath() {
    var points = [];
    for(var i = 0; i < steps; i += 1) {
        points.push({
            x: pathPointsFrom[i].x + (pathPointsTo[i].x - pathPointsFrom[i].x) * interpolationPoint.percentage,
            y: pathPointsFrom[i].y + (pathPointsTo[i].y - pathPointsFrom[i].y) * interpolationPoint.percentage
        })
    }
    return points;
}

//分段获取颜色
function getColorSegment(i) {
    var p = i / steps + offset;
    if(p > 1) p -= 1;
    return colors[Math.floor(p * 4)];
}

//绘制函数
function drawPath() {
    var thisColor, lastColor = getColorSegment(0);
    if(pathPointsNow){
        ctx.save();
        ctx.strokeStyle = lastColor;
        ctx.beginPath();
        for(var i = 0; i < pathPointsNow.length; i += 1) {
            if(pathPointsNow[i+1]) {
                ctx.moveTo(pathPointsNow[i].x, pathPointsNow[i].y);
                ctx.lineTo(pathPointsNow[i+1].x, pathPointsNow[i+1].y);
            } else {
                ctx.lineTo(pathPointsNow[0].x, pathPointsNow[0].y)
            }
            thisColor = getColorSegment(i);
            if(thisColor) {
                 if(thisColor !== lastColor) {
                    ctx.closePath();
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.strokeStyle = thisColor;
                    lastColor = thisColor;
                }
            }
           
        }
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }
}

function animate() {
    ctx.clearRect(0, 0, 200, 200);
    pathPointsNow = interpolationPath();
    offset += .009;
    if(offset > 1) offset -= 1;
    drawPath();
    var id = requestAnimationFrame(animate);
    var result = TWEEN.update();
    stats.update();
    if(!result) cancelAnimationFrame(id);
}

function tweenPath() {
    pathPointsFrom = paths[pathCount];
    pathPointsTo = (pathCount+1) <= 2 ? paths[pathCount + 1] : paths[0];
    tween = new TWEEN.Tween(interpolationPoint).to({
        percentage: 1
    },  1000).easing(TWEEN.Easing.Quartic.InOut)
    .delay(1000)
    .onComplete(function(obj) {
        interpolationPoint.percentage = 0;
        pathCount++;
        if(pathCount > 2) {
            pathCount = 0;
        }
        tweenPath();
    })
    .start();
}

tweenPath();
animate();